<template>
  <div class="goods-detail">
    <navigation-bar :isBack='false'
                    :style="navBarStyle">
      <template v-slot:nav-left>
        <div class="goods-detail-nav-left"
             @click="onBackClick">
          <img src="@img/back-2.svg"
               :style="leftSlotStyle">
          <img src="@img/back-white.svg"
               :style="centerSlotStyle">
        </div>
      </template>
      <template v-slot:nav-center>
        <p class="goods-detail-nav-center"
           :style="centerSlotStyle">商品详情</p>
      </template>
    </navigation-bar>
    <div class="goods-detail-content"
         ref="goods_detail_content">
      <parallax @onScrollChange='onScrollChange'>
        <template v-slot:parallax-slow>
          <my-swiper :swiperImgs='goodsData.detailImgs'
                     :height='SWIPER_IMG_HEIGHT'
                     :paginationType="'2'">
          </my-swiper>
        </template>
        <template v-slot:parallax-content>
          <!-- 商品详情页内容 -->
          <div class="goods-detail-content-desc">
            <div class="goods-detail-content-desc-item">
              <p class="goods-detail-content-desc-item-price"> ¥{{goodsData.price}}</p>
              <p class="goods-detail-content-desc-item-name">
                <direct v-if="goodsData.isDirect"></direct>
                {{goodsData.name}}
              </p>
            </div>
            <div class="goods-detail-content-desc-item">
              <!-- 已选商品 -->
              <p class="goods-detail-content-desc-item-select">
                <span>已选</span>
                <span class="text-line-1">{{goodsData.name}}</span>
              </p>
              <!-- 附加服务 -->
              <div class="goods-detail-content-desc-item-support">
                <ul class="goods-detail-content-desc-item-support-list">
                  <li class="goods-detail-content-desc-item-support-list-item"
                      v-for="(item,index) in attachDatas"
                      :key="index">
                    <img src="@img/support.svg">
                    <span>{{item}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="goods-detail-content-desc-detail">
              <img :src="item"
                   v-for="(item,index) in goodsData.detailImgs"
                   :key="index">
            </div>
          </div>

        </template>
      </parallax>
      <!-- 加入购物车和立即购买 -->
      <div class="goods-detail-buy">
        <div class="goods-detail-buy-add"
             @click="onAddShopCarBtmClick">加入购物车</div>
        <div class="goods-detail-buy-now"
             @click="onBuyClick">立即购买</div>
      </div>
    </div>
  </div>
</template>
<script>
import NavigationBar from '@c/currency/NavigationBar.vue'
import MySwiper from '@c/currency/Swiper.vue'
import Direct from '@c/goods/Direct.vue'
import Parallax from '@c/parallax/Parallax.vue'
export default {
  name: 'goodsDetail',
  data () {
    return {
      SWIPER_IMG_HEIGHT: '364px',
      goodsData: {},
      // 附加服务数据
      attachDatas: [
        '可配送海外',
        '京东发货售后',
        '京准达',
        '211限时达',
        '可自提供',
        '不可使用优惠卷'
      ],
      ANCHOR_SCROLL_TOP: 364,
      // 页面滚动值
      scrollValue: 0
    }
  },
  created () {
    // 当我们在浏览器里面刷新页面的时候vueRouter里面的params数据会被重置，在手机app上面是不存在这个问题的
    // 这个时候我们拿到的数据就是一个underfiend
    /*
      解决方案：
        在刷新页面的时候浏览器的url是保持不变化的，这个时候我们就可以添加一个goodsId
        通过后台提供的接口，通过goodsId请求数据
    */
    this.goodsId = this.$route.query.goodsId
    this.loadGoodData(this.goodsId)
  },
  components: {
    NavigationBar,
    MySwiper,
    Direct,
    Parallax
  },
  methods: {
    onBackClick () {
      this.$router.go(-1)
    },
    onScrollChange (val) {
      this.scrollValue = val
    },
    loadGoodData (id) {
      this.$http(`/goodsDetail`, {
        params: {
          goodsId: id
        }
      }).then(res => {
        this.goodsData = res.data.goodsData
      })
    },
    onBuyClick () {
      this.$router.push({
        name: 'buy',
        params: {
          routerType: 'push'
        },
        query: {
          id: this.goodsId
        }
      })
    },
    onAddShopCarBtmClick () {
      this.$store.commit('addShoppingDatas', this.goodsData)
      alert('添加成功')
      this.$router.push({
        name: 'imooc',
        params: {
          routerType: 'push',
          // 通过指令清除虚拟任务栈
          clearTask: true,
          componentsIndex: 1
        }
      })
    }
  },
  computed: {
    /**
     * 左侧slot样式
     */
    leftSlotStyle () {
      return {
        opacity: 1 - (this.scrollValue / this.ANCHOR_SCROLL_TOP)
      }
    },
    /**
     * 中间slot样式
     */
    centerSlotStyle () {
      return {
        opacity: this.scrollValue / this.ANCHOR_SCROLL_TOP
      }
    },
    /**
     * navBar样式
     */
    navBarStyle () {
      return {
        position: 'fixed',
        backgroundColor: `rgba(216,30,6,${this.scrollValue / this.ANCHOR_SCROLL_TOP})`
      }
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.goods-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  &-nav-left {
    width: 100%;
    display: flex;
    position: relative;
    img {
      align-self: center;
      position: absolute;
    }
  }
  &-nav-center {
    width: 100%;
    height: 100%;
    font-size: px2rem($titleSize);
    font-weight: bold;
    text-align: center;
    color: white;
  }
  &-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    &-desc {
      width: 100%;
      background: $bgColor;
      box-shadow: 0 0 px2rem(16) 0 rgba(0, 0, 0, 0.2);
      &-detail {
        img {
          width: 100%;
        }
      }
      &-item {
        background: white;
        padding: px2rem($marginSize);
        margin-bottom: px2rem($marginSize);
        // 价格
        &-price {
          font-size: px2rem(20);
          color: $MainColor;
          font-weight: bold;
        }
        // 名称
        &-name {
          margin-top: px2rem($marginSize);
          font-size: px2rem($titleSize);
          font-weight: 500;
          line-height: px2rem(20);
        }
        // 已选
        &-select {
          height: px2rem(44);
          display: flex;
          align-items: center;
          border-bottom: px2rem(1) solid $lineColor;
          span:nth-child(1) {
            font-size: px2rem($infoSize);
            color: $lineColor;
            margin-right: px2rem(4);
          }
          span:nth-child(2) {
            font-size: px2rem($titleSize);
            font-weight: 500;
            margin-left: px2rem(4);
            color: $textColor;
            flex-shrink: 0;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        // 附加服务
        &-support {
          margin-top: px2rem($marginSize);
          &-list {
            display: flex;
            flex-wrap: wrap;
            &-item {
              display: flex;
              align-items: center;
              padding: px2rem(6) 0;
              margin-right: px2rem($marginSize);
              img {
                width: px2rem(12);
                margin-right: px2rem(4);
              }
              span {
                font-size: px2rem($minSize);
              }
            }
          }
        }
      }
    }
  }
  &-buy {
    background: white;
    border-top: px2rem(1) solid $lineColor;
    height: px2rem(46);
    display: flex;
    justify-content: flex-end;
    padding: px2rem(6) 0;
    div {
      display: inline-block;
      width: px2rem(100);
      font-size: px2rem($infoSize);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-add {
      background: $MainColor;
    }
    &-now {
      background: darkgoldenrod;
    }
  }
}
</style>